<template>
  <view class="login-container">
    <!-- 主要内容区域 -->
    <view class="login-content">
      <!-- 欢迎文字区域 -->
      <view class="welcome-section">
        <view  v-if="currentStep ===2">
          <view >
			  <image class="hello-login6" src="/static/login6.png" mode=""></image>
		  </view>
          <view >
			   <image  class="welcome-subtitle2" src="/static/login7.png" mode=""></image>
		  </view>
        </view>
        <view  v-if="currentStep ===1">
          <view >
			  <image class="hello-text" src="/static/login3.png" mode=""></image>
		  </view>
         
			   <image  class="welcome-subtitle" src="/static/login4.png" mode=""></image>
        </view>
		<view  v-if="currentStep ===3">
		  <view >
			  <image class="hello-login6" src="/static/login6.png" mode=""></image>
		  </view>
		
		</view>
		
      </view>

      <!-- 步骤1: 短信快捷登录 -->
      <view v-if="currentStep === 1" class="step-content">
        <button class="sms-login-btn" @click="goToPhoneInput">
          <image  class="phone-icon" src="/static/login5.png" mode=""></image> 
          <text class="login-text">短信快捷登录</text>
        </button>

        <!-- 隐私政策同意 -->
        <view class="privacy-section">
          <view class="checkbox-wrapper" @click="togglePrivacy">
         
			  <image class="checkmark" v-if="privacyAgreed" src="/static/tuoyuan1.png" mode=""></image>
			  <image v-else class="checkmark" src="/static/tuoyuan.png" mode=""></image>
            <text class="privacy-text"
			@click="togglePrivacy"
              >阅读并同意<text class='yincshi' @click.stop="openPrivacyPolicy">隐私政策</text>、<text class='yincshi' @click.stop="openUserAgreement">用户协议</text>
              。若您未注册,将为您直接注册账号。</text
            >
          </view>
        </view>
      </view>

      <!-- 步骤2: 手机号输入 -->
      <view v-else-if="currentStep === 2" class="step-content">
        <view class="phone-input-wrapper">
          <text >
			  <image class="phone-tb" src="/static/login8.png" mode=""></image>
		  </text>
          <input
            class="phone-input"
            v-model="phoneNumber"
            placeholder="请输入您的手机号"
            type="number"
            maxlength="11"
          />
        </view>

        <button
          class="get-code-btn"
          @click="getVerificationCode"
        >
          {{ isGettingCode ? "发送中..." : "获取验证码" }}
        </button>
      </view>

      <!-- 步骤3: 验证码输入 -->
      <view v-else-if="currentStep === 3" class="step-content">
        <view class="verify-section">
          <text class="verify-title">请输入验证码</text>
          <text class="phone-display">输入发送至+{{ phoneNumber }}的验证码</text>
        </view>

        <!-- 6个验证码输入框 -->
        <view class="code-inputs-container">
          <view
            v-for="(item, index) in codeInputs"
            :key="index"
            class="code-input-item"
            :class="{
              active: currentCodeIndex === index,
              filled: item.value,
              disabled: !isInputEnabled(index)
            }"
          >
            <input
              class="code-input"
              :id="'codeInput' + index"
              :ref="'codeInput' + index"
              v-model="item.value"
              @input="onCodeInput(index, $event)"
              @focus="onCodeFocus(index)"
              @keydown="onCodeKeydown(index, $event)"
              type="number"
              maxlength="1"
              :disabled="!isInputEnabled(index)"
              :focus="currentCodeIndex === index"
            />
          </view>
        </view>

        <!-- <button class="verify-btn" @click="verifyCode" :disabled="!canVerify">
          {{ isVerifying ? "验证中..." : "验证" }}
        </button> -->

        <view class="resend-section" @click="resendCode">
          <text class="countdown-text" v-if="countdown > 0">重新发送({{ countdown }})</text>
          <text class="resend-text" v-else>重新发送</text>
        </view>
      </view>
    </view>

    <!-- 滑动验证码弹窗 -->
    <view class="captcha-modal" v-if="showCaptchaModal" @click="closeCaptcha">
      <view class="captcha-content" @click.stop>

        <!-- 使用go-captcha-uni滑动式验证码 -->
        <go-captcha-uni
          v-if="captchaData.image"
          type="slide"
          :config="captchaConfig"
          :data="captchaData"
          :theme="captchaTheme"
          ref="captchaRef"
          @event-move="handleMove"
          @event-confirm="handleConfirm"
          @event-refresh="handleRefresh"
          @event-close="closeCaptcha"
        />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, nextTick } from "vue";
import { setUserLogin, normalizeUserInfo } from '../../utils/user.js';
import { AUTH_API } from '../../config/api.js';

// 步骤管理
const currentStep = ref(1); // 1: 短信登录, 2: 手机号输入, 3: 验证码输入

// 数据管理
const phoneNumber = ref("");
const verificationCode = ref("");
const privacyAgreed = ref(false);
const isGettingCode = ref(false);
const isVerifying = ref(false);
const showErrors = ref(false);
const countdown = ref(0);
const canResend = ref(true);

// 获取页面参数（重定向地址）
const redirectUrl = ref('');

// 推荐人ID，默认为null
const inviterId = ref(null);

// 滑动验证码相关数据
const showCaptchaModal = ref(false);
const captchaKey = ref('');
const currentPosition = ref({ x: 0, y: 0 });

// 验证码配置
const captchaConfig = ref({
  width: 300,
  height: 200,
  thumbWidth: 60,
  thumbHeight: 60,
  showTheme: true,
  title: '请拖动滑块完成验证',
  scope: true
});

// 验证码数据
const captchaData = ref({
  thumbX: 0,
  thumbY: 0,
  thumbWidth: 60,
  thumbHeight: 60,
  image: '',
  thumb: ''
});

// 验证码主题
const captchaTheme = ref({
  textColor: '#333333',
  bgColor: '#ffffff',
  borderColor: '#e4e7ed',
  iconColor: '#909399',
  dragBarColor: '#409eff',
  dragBgColor: '#f5f7fa',
  dragIconColor: '#ffffff',
  loadingIconColor: '#409eff',
  bodyBgColor: '#ffffff'
});

// 验证码输入框数据
const codeInputs = ref([
  { value: "" },
  { value: "" },
  { value: "" },
  { value: "" },
  { value: "" },
  { value: "" },
]);
const currentCodeIndex = ref(0);

// 机器人表情
const robotExpression = ref("😊");

onMounted(() => {
  console.log("登录页面已加载");

  // 获取页面参数
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  if (currentPage && currentPage.options && currentPage.options.redirect) {
    redirectUrl.value = decodeURIComponent(currentPage.options.redirect);
  }
});

// 计算属性
const canGetCode = computed(() => {
  return phoneNumber.value.length === 11 && !isGettingCode.value;
});

const canVerify = computed(() => {
  const filledCount = codeInputs.value.filter(
    (item) => item.value !== ""
  ).length;
  return filledCount === 6 && !isVerifying.value;
});

// 步骤切换
const goToPhoneInput = () => {
	console.log('privacyAgreed',privacyAgreed.value)
  if (!privacyAgreed.value) {
    uni.showToast(
	{
	    title: '请先同意隐私政策和用户协议',
	    icon: 'none', // 可选 success/loading/none
	    duration: 2000 // 持续时间，单位ms
	})
    return;
  }
  currentStep.value = 2;
  robotExpression.value = "🤔";
};

const goToVerifyCode = () => {
  currentStep.value = 3;
  robotExpression.value = "📱";
  
  // 重置输入框状态并聚焦第一个
  nextTick(() => {
    currentCodeIndex.value = 0;
  });
};

// 获取验证码
const getVerificationCode = () => {
  console.log('执行')

  if (!phoneNumber.value) {
    uni.showToast({
      title: '请输入手机号码',
      icon: 'none',
      duration: 2000
    })
    return;
  }

  // 验证手机号格式
  const phoneRegex = /^1[3-9]\d{9}$/;
  if (!phoneRegex.test(phoneNumber.value)) {
    showErrors.value = true;
    uni.showToast({
      title: '手机号格式错误',
      icon: 'none',
      duration: 2000
    })
    return;
  }

  // 手机号格式正确，弹出滑动验证器
  showCaptcha();
};

// 显示滑动验证码
const showCaptcha = () => {
  showCaptchaModal.value = true;
  // 显示弹窗时自动生成验证码
  generateCaptcha();
};

// 关闭滑动验证码
const closeCaptcha = () => {
  showCaptchaModal.value = false;
};

// 生成验证码
const generateCaptcha = async () => {
  try {
    uni.showLoading({
      title: '生成验证码中...'
    });

    const response = await uni.request({
      url: AUTH_API.GENERATE_CAPTCHA,
      method: 'POST',
      header: {
        'Content-Type': 'application/json'
      }
    });

    console.log('生成验证码响应', response);

    if (response.statusCode === 200 && response.data.code === 200) {
      const data = response.data.data;
      captchaKey.value = data.captcha_key;

      // 使用后端返回的tile_y参数来设置拼图块的Y坐标位置
      const tileY = data.tile_y || 70; // 使用后端返回的Y坐标，默认70

      captchaData.value = {
        thumbX: 0,  // 拼图块初始位置：左边缘，用户需要拖拽到正确的X位置
        thumbY: tileY, // 使用后端返回的Y坐标，这是拼图块应该在的Y位置
        thumbWidth: data.tile_width || 60,   // 拼图块宽度
        thumbHeight: data.tile_height || 60, // 拼图块高度
        image: data.master_image,  // 带缺口的主图片
        thumb: data.tile_image     // 拼图块图片
      };

      console.log('设置拼图块位置 - Y坐标:', tileY);
      console.log('验证码数据设置完成', captchaData.value);

      uni.hideLoading();
      uni.showToast({
        title: '验证码生成成功',
        icon: 'success'
      });
    } else {
      const errorMsg = response.data?.message || response.data?.msg || '生成验证码失败';
      console.error('生成验证码失败详情', {
        statusCode: response.statusCode,
        responseData: response.data,
        errorMessage: errorMsg
      });
      throw new Error(errorMsg);
    }
  } catch (error) {
    console.error('生成验证码失败', error);

    uni.hideLoading();
    uni.showToast({
      title: '生成验证码失败',
      icon: 'error'
    });
  }
};

// 处理滑动事件
const handleMove = (x: number, y: number) => {
  currentPosition.value = { x, y };
  console.log('滑动位置:', x, y);
};

// 处理确认事件 - 验证滑动验证码并发送短信
const handleConfirm = async (point: any, reset: Function) => {
  console.log('确认验证，位置', point);
  console.log('发送短信数据', {
    mobile: phoneNumber.value,
    captcha_key: captchaKey.value,
    x: Math.round(point.x),
    y: Math.round(captchaData.value.thumbY),
    thumbY: captchaData.value.thumbY
  });

  try {
    uni.showLoading({
      title: '正在发送短信...'
    });

    const response = await uni.request({
      url: AUTH_API.SEND_SMS,
      method: 'POST',
      header: {
        'Content-Type': 'application/json'
      },
      data: {
        mobile: phoneNumber.value,
        captcha_key: captchaKey.value,
        x: Math.round(point.x),
        y: Math.round(captchaData.value.thumbY) // 使用后端提供的Y坐标
      }
    });

    console.log('验证响应完整数据:', JSON.stringify(response, null, 2));
    console.log('响应状态码:', response.statusCode);
    console.log('响应数据code:', response.data?.code);
    console.log('响应数据message:', response.data?.message);

    if (response.statusCode === 200 && response.data && response.data.code === 200) {
      uni.hideLoading();
      uni.showToast({
        title: '短信验证码已发送',
        icon: 'success'
      });

      // 发送成功后关闭弹窗并跳转到短信验证页面
      setTimeout(() => {
        closeCaptcha();
        goToVerifyCode();
        startCountdown(); // 在关闭弹窗后启动倒计时
      }, 1000);

      return true; // 发送成功
    } else {
      // 发送失败，显示后端返回的具体错误信息
      const errorMsg = response.data?.data?.error_message || response.data?.message || '发送失败';
      console.error('短信发送失败', errorMsg);

      uni.hideLoading();
      uni.showToast({
        title: errorMsg,
        icon: 'none',
        duration: 2000
      });

      // 重置验证码并重新生成
      reset();
      setTimeout(() => {
        generateCaptcha();
      }, 1500);

      return false; // 发送失败
    }
  } catch (error) {
    console.error('短信发送请求失败', error);

    uni.hideLoading();
    uni.showToast({
      title: '网络请求失败，请重试',
      icon: 'error'
    });

    // 重置验证码
    reset();
    setTimeout(() => {
      generateCaptcha();
    }, 1500);

    return false; // 发送失败
  }
};

// 处理刷新事件
const handleRefresh = () => {
  console.log('刷新验证码');
  generateCaptcha();
};

// 验证码输入框交互方法
const onCodeInput = (index: number, event: any) => {
  const value = event.detail.value;

  // 只允许输入数字，并且只保留最后一位
  const numericValue = value.replace(/[^0-9]/g, '').slice(-1);
  codeInputs.value[index].value = numericValue;

  // 自动跳转到下一个输入框
  if (numericValue && index < 5) {
    // 直接更新 currentCodeIndex,配合 :focus 属性实现自动聚焦
    nextTick(() => {
      currentCodeIndex.value = index + 1;
    });
  }

  // 更新验证码字符串
  updateVerificationCode();

  // 如果第六个输入框输入完成，自动触发验证码验证
  if (index === 5 && numericValue) {
    setTimeout(() => {
      verifyCode(); // 触发验证码验证
    }, 500);
  }
};

// 聚焦到指定输入框的通用方法
const focusInput = (index: number) => {
  const inputId = `codeInput${index}`;
  console.log('inputId',inputId)
  // 方法1: 使用uni.createSelectorQuery (适用于小程序)
  uni.createSelectorQuery().select(`#${inputId}`).fields({
    node: true,
    size: true
  }).exec((res) => {
	  console.log('res',res)
    if (res[0] && res[0].node) {
		console.log('res',res)
      setTimeout(()=>{
		  res[0].node.focus();
	  },1000)
    }
  });

  // 方法2: 直接操作DOM (适用于H5)
  if (typeof document !== 'undefined') {
    setTimeout(() => {
      const input = document.getElementById(inputId);
      if (input) {
        input.focus();
      }
    }, 50);
  }
};

// 判断输入框是否可以启用
const isInputEnabled = (index: number) => {
  // 第一个输入框总是可以点击
  if (index === 0) {
    return true;
  }

  // 其他输入框只有在前一个输入框有值时才能点击
  for (let i = 0; i < index; i++) {
    if (!codeInputs.value[i].value) {
      return false;
    }
  }

  return true;
};

const onCodeFocus = (index: number) => {
  // 只有启用的输入框才能获得焦点
  if (isInputEnabled(index)) {
    currentCodeIndex.value = index;
  }
};

const onCodeKeydown = (index: number, event: any) => {
  // 处理退格键
  if (event.keyCode === 8 && !codeInputs.value[index].value && index > 0) {
    // 直接更新 currentCodeIndex,配合 :focus 属性实现自动聚焦
    nextTick(() => {
      currentCodeIndex.value = index - 1;
    });
  }
};

const updateVerificationCode = () => {
  verificationCode.value = codeInputs.value.map((item) => item.value).join("");
};

// 验证验证码
const verifyCode = async () => {
  if (!canVerify.value) {
    return;
  }

  isVerifying.value = true;

  uni.showLoading({
    title: "登录中...",
  });

  try {
    // 构建登录请求参数
    const loginData = {
      mobile: phoneNumber.value,
      sms_code: verificationCode.value,
      platform: 'app'
    };

    // 如果有推荐人ID，则添加到请求参数中
    if (inviterId.value) {
      loginData.inviter_id = inviterId.value;
    }

    console.log('登录请求参数:', loginData);

    // 调用登录API
    const response = await uni.request({
      url: AUTH_API.LOGIN,
      method: 'POST',
      header: {
        'Content-Type': 'application/json'
      },
      data: loginData
    });

    console.log('登录响应:', response);

    uni.hideLoading();

    if (response.statusCode === 200 && response.data.code === 200) {
      // 登录成功
      const { token, user_info } = response.data.data;

      // 保存token到本地存储
      uni.setStorageSync('token', token);

      // 直接使用后端返回的用户信息，不再调用额外的用户信息接口
      if (user_info) {
        // 使用标准化函数处理用户信息
        const userInfo = normalizeUserInfo(user_info, phoneNumber.value);

        // 使用setUserLogin函数保存用户信息
        setUserLogin(token, userInfo);
        console.log('用户信息已保存:', userInfo);
      } else {
        // 如果没有用户信息，只保存token和登录状态
        uni.setStorageSync('token', token);
        uni.setStorageSync('isLoggedIn', true);
      }

      uni.showToast({
        title: '登录成功',
        icon: 'success'
      });

      // 登录成功后跳转
      setTimeout(() => {
        if (redirectUrl.value) {
          // 如果有重定向地址，跳转到指定页面
          const targetUrl = redirectUrl.value;

          // 检查是否是tabBar页面
          const tabBarPages = ['/pages/index/index', '/pages/profile/profile'];
          const isTabBarPage = tabBarPages.some(page => targetUrl.includes(page));

          if (isTabBarPage) {
            // 对于tabBar页面使用switchTab
            uni.switchTab({
              url: targetUrl,
              fail: () => {
                // 切换失败，返回上一页
                uni.navigateBack();
              }
            });
          } else {
            // 对于普通页面使用redirectTo
            uni.redirectTo({
              url: targetUrl,
              fail: () => {
                // 重定向失败，返回上一页
                uni.navigateBack();
              }
            });
          }
        } else {
          // 没有重定向地址，返回上一页
          uni.navigateBack();
        }
      }, 1500);

    } else {
      // 登录失败
      throw new Error(response.data?.data?.error_message || response.data?.error_message || response.data?.message || '登录失败');
    }
  } catch (error) {
    console.error('登录失败:', error);
    uni.hideLoading();
    uni.showToast({
      title: error.message || '登录失败，请重试',
      icon: 'error'
    });
  } finally {
    isVerifying.value = false;
  }
};

// 重新发送验证码
const resendCode = () => {
  if (!canResend.value) {
    return;
  }

  // 清空验证码输入框
  codeInputs.value.forEach(item => {
    item.value = "";
  });

  // 重置当前输入框索引
  currentCodeIndex.value = 0;

  // 清空验证码字符串
  verificationCode.value = "";

  getVerificationCode();
  startCountdown();
};

// 倒计时
const startCountdown = () => {
  canResend.value = false;
  countdown.value = 120;

  const timer = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(timer);
      canResend.value = true;
    }
  }, 1000);
};

// 隐私政策
const togglePrivacy = () => {
  privacyAgreed.value = !privacyAgreed.value;
};

// 打开隐私政策页面
const openPrivacyPolicy = () => {
  uni.navigateTo({
    url: '/pages/privacy-policy/privacy-policy'
  })
};

// 打开用户协议页面
const openUserAgreement = () => {
  uni.navigateTo({
    url: '/pages/user-agreement/user-agreement'
  })
};

// 返回
const goBack = () => {
  if (currentStep.value > 1) {
    currentStep.value--;
    robotExpression.value = currentStep.value === 1 ? "😊" : "🤔";
  } else {
    uni.navigateBack();
  }
};
</script>

<style scoped>
/* 登录页面样式 */
.login-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #c2ddff 0%, #ffffff 100%);
  display: flex;
  flex-direction: column;
  position: relative;
}

/* 状态栏 */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 40rpx;
  background: transparent;
}

.back-btn {
  font-size: 48rpx;
  color: #9c27b0;
  font-weight: bold;
  cursor: pointer;
}

.status-time {
  font-size: 32rpx;
  font-weight: 600;
  color: #000;
}

.status-icons {
  display: flex;
  gap: 16rpx;
}

.status-icon {
  font-size: 28rpx;
  color: #000;
}

/* 主要内容区域 */
.login-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 60rpx 40rpx 40rpx;
  position: relative;
}



.welcome-text {
  flex: 1;
}

.hello-text {
	width: 470rpx;
 height: 90rpx;
margin: 212rpx 0 16rpx 74rpx;
}


.welcome-subtitle {
 width: 374rpx;
 height: 476rpx;
 margin-left: 188rpx;
  display: block;
}

.welcome-subtitle2{
	width: 318rpx;
	height: 120rpx;
	margin-left: 30rpx;
	margin-top: -50rpx;
}


.robot-head {
  width: 120rpx;
  height: 120rpx;
  background: linear-gradient(135deg, #9c27b0 0%, #673ab7 100%);
  border-radius: 50%;
  position: relative;
  margin: 0 auto 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(156, 39, 176, 0.3);
}

.robot-antenna {
  position: absolute;
  top: -20rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 4rpx;
  height: 20rpx;
  background: #9c27b0;
  border-radius: 2rpx;
}

.robot-antenna::after {
  content: "";
  position: absolute;
  top: -8rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 12rpx;
  height: 12rpx;
  background: #ffd700;
  border-radius: 50%;
}

.robot-screen {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60rpx;
  height: 40rpx;
  background: #2196f3;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.screen-text {
  font-size: 24rpx;
  color: white;
}

.robot-body {
  width: 100rpx;
  height: 100rpx;
  background: linear-gradient(135deg, #9c27b0 0%, #673ab7 100%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  position: relative;
  margin: 0 auto;
  box-shadow: 0 8rpx 32rpx rgba(156, 39, 176, 0.3);
}
.phone-tb{
	width: 26rpx;
	height: 30rpx;
	margin: 10rpx 10rpx 0 0;
}
.robot-arm {
  position: absolute;
  width: 20rpx;
  height: 60rpx;
  background: linear-gradient(135deg, #9c27b0 0%, #673ab7 100%);
  border-radius: 10rpx;
  top: 20rpx;
}

.robot-arm.left {
  left: -15rpx;
  transform: rotate(-20deg);
}

.robot-arm.right {
  right: -15rpx;
  transform: rotate(20deg);
}

/* 说话气泡 */
.speech-bubble {
  position: absolute;
  top: -60rpx;
  right: -20rpx;
  background: white;
  border-radius: 20rpx;
  padding: 16rpx 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.speech-bubble::after {
  content: "";
  position: absolute;
  bottom: -8rpx;
  right: 30rpx;
  width: 0;
  height: 0;
  border-left: 8rpx solid transparent;
  border-right: 8rpx solid transparent;
  border-top: 8rpx solid white;
}

.bubble-text {
  font-size: 24rpx;
  color: #333;
  font-weight: 500;
}

/* 输入区域 */
.input-section {
  margin-bottom: 60rpx;
}

.phone-input-wrapper {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 16rpx;
  padding: 0 24rpx;
  margin-bottom: 40rpx;
  margin-top: 130rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.phone-icon {
  font-size: 32rpx;
  color: #9c27b0;
  margin-right: 20rpx;
  width: 48.5rpx;
  height: 48.5rpx;
}

.phone-input {
  flex: 1;
  height: 88rpx;
  border: none;
  background: transparent;
  font-size: 32rpx;
  color: #999999;
}

.phone-input::placeholder {
  color: #999;
}
.hello-login6{
	width: 328rpx;
	height: 348rpx;
	float: right;
	display: block;
	margin-top: 140rpx;
	margin-right: 90rpx;
}
.get-code-btn {
  width: 100%;
  height: 90rpx;
  color: white;
  border: none;
  border-radius: 16rpx;
  font-size: 32rpx;
  font-weight: 600;
  box-shadow: 0 4rpx 16rpx rgba(33, 150, 243, 0.3);
  transition: all 0.3s ease;
  background: #565FFD !important;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  color: #fff !important;
  margin-top: 60rpx;
}

.get-code-btn:active {
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 8rpx rgba(33, 150, 243, 0.4);
}

.get-code-btn:disabled {
  background: #e0e0e0;
  color: #999;
  box-shadow: none;
  transform: none;
}

/* 步骤内容区域 */
.step-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 短信登录按钮 */
.sms-login-btn {
  width: 100%;
  height: 100rpx;
  border: none;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20rpx;
  margin-top: 150rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 8rpx 32rpx rgba(156, 39, 176, 0.3);
  transition: all 0.3s ease;
  background-color: #565ffd;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
}

.sms-login-btn:active {
  transform: translateY(2rpx);
  box-shadow: 0 4rpx 16rpx rgba(156, 39, 176, 0.4);
}

.login-text {
  font-size: 36rpx;
  color: white;
  font-weight: 600;
}

/* 隐私政策区域 */
.privacy-section {
  margin-bottom: 40rpx;
}

.checkbox-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 20rpx;
  cursor: pointer;
}

/* 自定义复选框样式 */
.custom-checkbox {
  width: 40rpx;
  height: 40rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 4rpx;
  transition: all 0.3s ease;
  background: white;
}

.custom-checkbox.checked {
  background: #9C27B0;
  border-color: #9C27B0;
}

.checkmark {
  width: 32rpx;
  height: 32rpx;
}

.privacy-text {
  font-size: 24rpx;
  color: #999999;
  line-height: 1.5;
  flex: 1;
}
.yincshi{
	color: #565ffd;
}

/* 验证码区域 */
.verify-section {
  text-align: center;
  margin-bottom: 60rpx;
}

.verify-title {
font-size: 44rpx;
color: #565FFD;
  display: block;
  text-align: left;
  line-height: 60rpx;
  margin-bottom: 16rpx;
  
}

.phone-display {
  font-size: 28rpx;
  color: #333;
  font-weight: 400;
  display: block;
  text-align: left;
}

/* 6个验证码输入框容器 */
.code-inputs-container {
  display: flex;
  justify-content: center;
  gap: 20rpx;
  margin-bottom: 40rpx;
  padding: 0 40rpx;
}

.code-input-item {
  width: 80rpx;
  height: 80rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
}

.code-input-item.active {
  border-color: #9c27b0;
  box-shadow: 0 0 0 4rpx rgba(156, 39, 176, 0.1);
}

.code-input-item.filled {
  border-color: #4caf50;
  background: #f1f8e9;
}

.code-input-item.disabled {
  border-color: #f0f0f0;
  background: #f8f8f8;
}

.code-input {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  font-size: 36rpx;
  color: #333;
  text-align: center;
  font-weight: bold;
}

.code-input:focus {
  outline: none;
}

.code-input:disabled {
  color: #ccc;
  background: #f5f5f5;
}

.verify-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
  color: white;
  border: none;
  border-radius: 16rpx;
  font-size: 32rpx;
  font-weight: 600;
  margin-bottom: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(33, 150, 243, 0.3);
  transition: all 0.3s ease;
}

.verify-btn:active {
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 8rpx rgba(33, 150, 243, 0.4);
}

.verify-btn:disabled {
  background: #e0e0e0;
  color: #999;
  box-shadow: none;
  transform: none;
}

/* 重新发送区域 */
.resend-section {
  text-align: center;
}

.resend-text {
  font-size: 28rpx;
  color: #9c27b0;
  cursor: pointer;
}

.countdown-text {
  font-size: 28rpx;
  color: #999;
}

/* 滑动验证码弹窗样式 */
.captcha-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 40rpx;
  box-sizing: border-box;
}

.captcha-content {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  max-width: 680rpx;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

/* 错误提示区域 */
.error-section {
  margin-top: 40rpx;
}

.error-item {
  background: #424242;
  border-radius: 12rpx;
  padding: 24rpx 32rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.error-text {
  font-size: 28rpx;
  color: white;
  text-align: center;
}
</style>
